<template>
  <div class="w-full h-full">
    <!-- <PageHeader :title="t('fundMana.index.资金管理')" /> -->
    <div class="card3 flex pt37 pb37">
      <div
        class="card_item flex_fdc_aic flex1"
        v-for="item in dataList"
        :key="item.title"
      >
        <div class="card_item_title fs-16">{{ item.title }}
          <el-tooltip
              :content="item.tips"
              placement="right"
              style="width: 300px"
              v-if="item.tips"
          >
            <el-icon class="ml8" :size="16" color="#999999">
              <InfoFilled />
            </el-icon>
          </el-tooltip>
        </div>
        <div class="card_item_count">{{ baseData?.[item.key] ?? "--" }}</div>
      </div>
    </div>

    <div class="card3 mt10 p10" style="height: calc(100% - 160px)">
      <PageHeader
        :title="t('fundMana.index.资金管理')"
        showTipsIcon
        @tipsIconClick="showTips = !showTips"
      />
      <div class="tips color-db5609 mb12" v-show="showTips">
        <div class="fs-16">{{ t('fundMana.index.温馨提示') }}</div>
        <div class="fs-12">
          {{ t('fundMana.index.计算公式结算金额实付订单金额退款金额平台佣金积分抵扣金额') }}
        </div>
        <div class="fs-12">{{ t('fundMana.index.结算流程店铺发起结算平台审核平台确认结算') }}</div>
      </div>
      <!-- <div class="flex_aic_jcsb">
        <div class="flex_aic">
          <el-date-picker
            v-model="filters.date"
            type="datetime"
            :placeholder="t('fundMana.index.优惠券到期时间')"
            style="width: 256px"
            class="mr10 flex_grow_0 flex-shrink-0"
          />

          <el-select
            v-model="filters.type"
            :placeholder="t('fundMana.index.请选择审核状态')"
            class="mr10 flex-shrink-0"
            style="width: 256px"
          >
            <el-option
              v-for="item in statusOptions"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </div>

        <div class="flex_aic">
          <el-button>{{ t('fundMana.index.重置') }}</el-button>
          <el-button type="primary">{{ t('fundMana.index.查询') }}</el-button>
        </div>
      </div> -->
      <div class="mt12 toolbar flex_aic_jcsb" v-my-point="'tenantSettlement:prebuild'">
        <div class="addBtn flex_aic_jcc" @click="handleWithdraw">
          <SvgIcon name="iconziyuan23" color="rgb(255, 89, 8)" class="mr8" />
          <span>{{ t('fundMana.index.发起结算') }}</span>
        </div>
      </div>
      <el-table :data="tableData" border class="mt12 cover-table" v-loading="tableLoading">
        <el-table-column :prop="'createdTime'" :label="t('fundMana.index.提交时间')">
          <template #default="scope">
            {{ moment(scope.row.createdTime).format("YYYY-MM-DD HH:mm:ss") }}
          </template>
        </el-table-column>
        <el-table-column :prop="'commissionIncomeTotal'" :label="t('fundMana.index.结算总金额')" />
        <el-table-column :prop="'bankAccountName'" :label="t('fundMana.index.收款人姓名')" />
        <el-table-column :prop="'bankName'" :label="t('fundMana.index.银行')" />
        <el-table-column :prop="'bankAccountNo'" :label="t('fundMana.index.银行卡号')" />
        <el-table-column :prop="'status'" :label="t('fundMana.index.结算状态')">
          <template #default="scope">
            <el-tag :type="statusMap[scope.row.status]?.type">
              {{ statusMap[scope.row.status]?.label }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column :label="t('fundMana.index.操作')" fixed="right" width="200">
          <template #default="scope">
            <!-- <el-button
              v-if="scope.row.status === 3"
              type="text"
              size="small"
              @click="handleViewReason(scope.row)"
            >
              {{ t('fundMana.index.查看原因') }}
            </el-button> -->
            <el-button
              type="text"
              size="small"
              @click="handleView(scope.row)"
            >
              {{ t('fundMana.index.查看') }}
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="flex_aic_jcc mt10 w-full">
        <el-pagination
          v-model="filters.page"
          :page-size="filters.pageSize"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>

    <with-draw v-model="showWithdrawDia" />
    <reason-dia v-model="showReasonDia" />
  </div>
</template>
<script setup>
import { ref, reactive, onMounted } from "vue";
import { useI18n } from "vue-i18n";
import { InfoFilled, Refresh } from "@element-plus/icons-vue";
import moment from "moment";
import { ElMessage } from "element-plus";
import WithDraw from "./withDraw.vue";
import ReasonDia from "./reasonDia.vue";
import Api from "@/config/api/api";
import { useRouter } from "vue-router";

const { t } = useI18n();
const router = useRouter()
const baseData = ref({});
// Todo 文本国际化处理
const dataList = ref([
  {
    title: t('fundMana.index.收益总额'),
    key: "incomeTotal",
  },
  {
    title: t('fundMana.index.已结算金额'),
    key: "settleTotal",
    tips: t('fundMana.index.已完成结算结算中'),
  },
  {
    title: t('fundMana.index.账户余额'),
    key: "balance",
    tips: t('fundMana.index.已付款未结算订单'),
  },
]);

const statusOptions = [
    /* Todo这里要考虑国际化的处理 */
  { label: t('fundMana.index.待审核'), value: 1, type: "primary" },
  { label: t('fundMana.index.待打款'), value: 2, type: "warning" },
  { label: t('fundMana.index.已打款'), value: 3, type: "success" },
  { label: t('fundMana.index.驳回'), value: -1, type: "danger" },
];

const statusMap = {};
statusOptions.forEach((el) => {
  statusMap[el.value] = el;
});

const total = ref(0);
const filters = reactive({
  type: "",
  date: [],
  page: 1,
  pageSize: 10,
});
const loading = ref(false);
const tableLoading = ref(false);
const tableData = ref([]);
const showTips = ref(true);
const showWithdrawDia = ref(false);
const showReasonDia = ref(false);
const handleWithdraw = () => {
  loading.value = true;
  Api.tenantSettlement_prebuild({})
    .then((res) => {
      if (res.status === 200) {
        ElMessage.success(t('fundMana.index.结算单已生成'));
        // 刷新列表
        getDataList();
      }
    })
    .finally(() => {
      loading.value = false;
    });
};

const handleViewReason = (row) => {
  showReasonDia.value = true;
};

const handleView = (row)=>{
  router.push({
    path: "/store/fundMana/detail",
    query: {
      id: row.id
    }
  })
}
const handleRefresh = () => {
  getBaseData();
}
const handleSizeChange = (size) => {
  filters.pageSize = size;
  filters.page = 1;
  getDataList();
};
const handleCurrentChange = (page) => {
  filters.page = page;
  getDataList();
};
const getDataList = () => {
  tableLoading.value = true;
  const user = Storage.get("user", true);
  Api.tenantSettlement_list({
    tenantId: user.tenant?.id || "",
    page: filters.page - 1,
    pageSize: filters.pageSize,
  }).then((res) => {
    tableData.value = res.data?.content || [];
    total.value = Number(res.data?.totalElements || 0);
  }).finally(() => {
    tableLoading.value = false;
  });
};
const getBaseData = () => {
  const user = Storage.get("user", true);
  Api.tenantSettlement_report({}).then((res) => {
    baseData.value = res.data || {};
    console.log(baseData)
  });
};
onMounted(() => {
  getBaseData();
  getDataList();
});
</script>
<style lang="scss" scoped>
.card {
  background-color: #ffffff;
  padding: 10px;
  border-radius: 4px;
}
.card_item {
  border-right: 1px solid hsla(0, 0%, 84.7%, 0.5);
  &:last-child {
    border-right: none;
  }
  .card_item_title {
    color: #000;
    &::before {
      content: "";
      display: inline-block;
      width: 10px;
      height: 10px;
      background-color: #f0be35;
      border-radius: 50%;
      margin-right: 12px;
    }
  }
  .card_item_count {
    font-size: 34px;
    font-weight: 700;
    text-align: center;
  }
}

.card3 {
  background-color: #ffffff;
  border-radius: 4px;
  .card3-header {
    height: 48px;
    border-bottom: 1px solid rgba(238, 238, 238, 1);
  }
}

.addBtn {
  height: 28px;
  margin-left: 10px;
  padding: 0 7px;
  border-radius: 3px;
  background: #fff;
  cursor: pointer;
}

.tips {
  width: 100%;
  margin-top: 10px;
  padding: 10px 15px;
  border-radius: 4px;
  background: rgba(255, 126, 40, 0.07);
}
</style>
